<template>
  <div class="app-container">
    <div class="advanced-search-wrapper clearfix">
      <div class="clearfix">
        <div class="search-wrapper clearfix">
          <el-plain-search
            :isShow.sync="searchMoudle.isShow"
            :span="12"
            :search-data="searchMoudle.searchData"
            :inputSingle="searchMoudle.inputSingle"
            @onSubmitSingle="onSubmitSingle"
          >
            <div class="tab-wrapper">
              <el-button
                type="table-top"
                size="mini"
                @click="$router.push('/techProcess/processDefinition')"
                >流程定义</el-button
              >
              <el-button type="table-top-active" size="mini"
                >流程模板</el-button
              >
            </div>
            <!--el-button size="mini" type="primary" @click="newBuiltData.dialogVisible=true">+ 新建模板</el-button-->
          </el-plain-search>
        </div>
      </div>
    </div>
    <!--表格区域Begin-->
    <div class="multifunctional-table-wrapper">
      <el-table
        :data="tableMoudle.list"
        border
        style="width: 100%"
        highlight-current-row
        class="multifunctional-table"
      >
        <el-table-column type="index" :index="indexMethod" label="序号">
        </el-table-column>
        <template v-for="(table, index) in tableMoudle.formItem">
          <el-table-column
            :fixed="table.fixed"
            :key="index"
            :label="table.label"
            :width="table.width"
            :prop="table.prop"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">{{ scope.row[table.prop] }} </template>
          </el-table-column>
        </template>
        <el-table-column label="操作" width="70">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              @click="handleEdit(scope.$index, scope.row)"
              >配置
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--表格区域End-->
  </div>
</template>

<script>
// import { processTemplateList } from "@/api/process"

import { addUrlPerFix } from "@/basa/utils";
const workspaceUrl = addUrlPerFix(process.env.VUE_APP_BASE_URL);
export default {
  name: "templatePrecess",
  data() {
    return {
      newBuiltData: {
        dialogVisible: false,
        title: "新建流程"
      },
      searchMoudle: {
        // 搜索模块数据
        isShow: false,
        searchData: {
          label: "模板名称：",
          placeholder: "模板名称",
          name: "proessTmpName"
        },
        inputSingle: "",
        input: "",
        value: "" // 简单搜索End
      },
      leftLevelBelow: {
        param: {
          id: "", // 默认当前人所在单位
          flag: 0 // 展示层级 0 公司 1部门 2 成员
        }
      },
      proessTmpName: "",
      tableMoudle: {
        list: [],
        pageNo: 1,
        pageSize: 10,
        totalNum: 0,
        formItem: [
          {
            label: "模板ID",
            prop: "processDefID",
            width: "auto",
            checked: true,
            fixed: false
          },
          {
            label: "模板名称",
            prop: "processTmpName",
            width: "auto",
            checked: true,
            fixed: false
          },
          {
            label: "流程类型",
            prop: "approvalTypeName",
            width: "auto",
            checked: true,
            fixed: false
          },
          {
            label: "创建人",
            prop: "approvalTypeName",
            width: "auto",
            checked: true,
            fixed: false
          },
          {
            label: "创建时间",
            prop: "createTime",
            width: "auto",
            checked: true,
            fixed: false
          }
          // { label: '当前版本', prop: 'versionSign', width: 'auto', checked: true, fixed: false } // 有未生效版本号则红色高亮显示
        ]
      },
      tableData: [],
      isShow: false
    };
  },
  beforeRouteLeave(to, from, next) {
    // 设置下一个路由的 meta
    to.meta.keepAlive = false; // 让 A 不缓存，即刷新
    next();
  },
  activated() {
    this.getProcessTemplateList();
  },
  methods: {
    indexMethod(index) {
      // 序号
      return index * this.tableMoudle.pageNo + 1;
    },
    slectOrgSuccess(obj) {
      /** 取入参**/
      this.getProcessTemplateList();
    },
    onSubmitSingle() {
      console.log("onSubmitSingle");
    },
    getProcessTemplateList() {
      // 请求流程定义列表
      // let obj = {
      //     proessTmpName: this.proessTmpName
      // }
      // processTemplateList(obj).then(res => {
      //     this.tableMoudle.list = res.data.data.rows
      // })
    },
    /** **************分页专用区域Begin**********************/
    handlePrev() {
      console.log("上一页");
    },
    handleNext() {
      console.log("下一页");
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.getList();
    },
    handleCurrentChange(val) {
      // 跳转翻页都会调这个方法
      this.tableMoudle.pageNo = val;
      this.getList();
    },
    /** **************分页专用区域End**********************/
    tabChange(index) {
      console.log(index);
      this.isActive = index;
      let tabCardCollection = document.querySelectorAll(".tab-card");
      let len = tabCardCollection.length;
      for (let i = 0; i < len; i++) {
        tabCardCollection[i].style.display = "none";
      }
      tabCardCollection[index].style.display = "block";
    },
    // newBuildBranch () {
    //   console.log('1111111')
    // },
    newBuildTemp() {
      console.log("22222222");
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    handleNodeClick(data) {
      this.getTableData(data.id);
    },
    handleCloser(done) {
      done();
    },
    onSubmitMulti() {
      console.log("onSubmitMulti");
    },
    onSubmitTmpl() {
      console.log("onSubmitTmpl");
    },
    onSubmitSearch() {
      console.log("onSubmitSearch");
    },
    handleEdit(index, row) {
      // 参数
      let hasForm = false;
      let locale = "zh_CN";
      let processDefID = row.processDefID || ""; // 流程id
      let catalogUUID = row.catalogId || "";
      let processDefName = row.processDefName || ""; // 流程名称
      let processDefCHName = row.processChName || ""; // 流程中文名称
      let description = row.description || "";
      let extend3 = row.extend3 || "";
      let extend4 = row.extend4 || "";
      let extend5 = row.extend5 || "";
      let extend6 = row.extend6 || "";
      let extend8 = row.extend8 || "";
      let extend9 = row.extend9 || "";
      let extend10 = row.extend10 || "";
      let extend11 = row.extend11 || "";
      let author = row.author || "";
      let editType = row.editType || "processTemplate";
      let mdfState = row.modifyState === "9" ? "9" : "1";

      var url =
        workspaceUrl +
        "/workspace/workflow/bps_composer/flex/bizProcessCustomDg.jsp?hasForm=" +
        hasForm +
        "&locale=" +
        locale +
        "&processDefID=" +
        processDefID +
        "&catalogUUID=" +
        catalogUUID +
        "&processDefName=" +
        processDefName +
        "&processDefCHName=" +
        processDefCHName +
        "&description=" +
        description +
        "&extend3=" +
        extend3 +
        "&extend4=" +
        extend4 +
        "&extend5=" +
        extend5 +
        "&extend6=" +
        extend6 +
        "&extend8=" +
        extend8 +
        "&extend9=" +
        extend9 +
        "&extend10=" +
        extend10 +
        "&extend11=" +
        extend11 +
        "&author=" +
        author +
        "&editType=" +
        editType +
        "&mdfState=" +
        mdfState; // 转向网页的地址;
      var name = "add"; // 网页名称，可为空;
      var iWidth = 720; // 弹出窗口的宽度;
      var iHeight = 600; // 弹出窗口的高度;
      // 获得窗口的垂直位置
      var iTop = (window.screen.availHeight - 30 - iHeight) / 2;
      // 获得窗口的水平位置
      var iLeft = (window.screen.availWidth - 10 - iWidth) / 2;
      window.open(
        url,
        name,
        "height=" +
          iHeight +
          ",,innerHeight=" +
          iHeight +
          ",width=" +
          iWidth +
          ",innerWidth=" +
          iWidth +
          ",top=" +
          iTop +
          ",left=" +
          iLeft +
          ",status=no,toolbar=no,menubar=no,location=no,resizable=no,scrollbars=0,titlebar=no"
      );
      console.log("handleEdit");
    },
    getTableData(data) {
      // note 模拟树的切换数据，实际请求接口
      if (data === "1") {
        this.tableData = [
          {
            number: "1",
            appunit: "交建云商运营中心",
            approvabusi: "商品",
            orgType: "协议铺货审批",
            proname: "商品协议铺货审批",
            proId: "1000010101",
            vernum: "1.1.1",
            effectdate: "2019-09-19"
          },
          {
            number: "2",
            appunit: "交建云商运营中心",
            approvabusi: "商品",
            orgType: "协议铺货审批",
            proname: "商品协议铺货审批",
            proId: "1000010101",
            vernum: "1.1.1",
            effectdate: "2019-09-19"
          },
          {
            number: "3",
            appunit: "交建云商运营中心",
            approvabusi: "商品",
            orgType: "协议铺货审批",
            proname: "商品协议铺货审批",
            proId: "1000010101",
            vernum: "1.1.1",
            effectdate: "2019-09-19"
          },
          {
            number: "4",
            appunit: "交建云商运营中心",
            approvabusi: "商品",
            orgType: "协议铺货审批",
            proname: "商品协议铺货审批",
            proId: "1000010101",
            vernum: "1.1.1",
            effectdate: "2019-09-19"
          },
          {
            number: "5",
            appunit: "交建云商运营中心",
            approvabusi: "商品",
            orgType: "协议铺货审批",
            proname: "商品协议铺货审批",
            proId: "1000010101",
            vernum: "1.1.1",
            effectdate: "2019-09-19"
          },
          {
            number: "6",
            appunit: "交建云商运营中心",
            approvabusi: "商品",
            orgType: "协议铺货审批",
            proname: "商品协议铺货审批",
            proId: "1000010101",
            vernum: "1.1.1",
            effectdate: "2019-09-19"
          }
        ];
      } else if (data === "1-1") {
        this.tableData = [
          {
            number: "1",
            appunit: "",
            approvabusi: "",
            orgType: "",
            proname: "",
            proId: "100001",
            vernum: "",
            effectdate: ""
          },
          {
            number: "2",
            appunit: "",
            approvabusi: "",
            orgType: "",
            proname: "",
            proId: "100001",
            vernum: "",
            effectdate: ""
          }
        ];
      } else {
        this.tableData = [];
      }
    }
  }
};
</script>

<style scoped lang="scss">
/deep/ .tab-wrapper .el-button + .el-button {
  margin-left: 30px;
}
.app-container {
  height: calc(100vh - 145px);
}
</style>
